<template>
  <!-- vue3页面 -->
  <div class="main" ref="main">
    <div
      class="center bgImg"
      v-if="tabIndex === 1"
      :class="isOver ? 'center' : 'big'"
    ></div>
    <div
      class="circle bgImg"
      v-if="tabIndex === 1"
      :class="isOver ? 'circle' : 'big'"
    ></div>
    <div
      class="line bgImg"
      v-if="tabIndex === 1"
      @animationend="transitionEnd"
      :class="isOver ? 'line' : 'big'"
    ></div>
    <div class="header">
      <a-row style="height: 100%">
        <a-col :span="6" style="height: 100%">
          <div class="actionGroup">
            <div
              class="action"
              :class="tabIndex === 1 ? 'active' : ''"
              @click="tabIndex = 1"
            >
              首页
            </div>
            <div
              class="action"
              :class="tabIndex === 2 ? 'active' : ''"
              @click="tabIndex = 2"
            >
              智慧办公
            </div>
            <div
              class="action"
              :class="tabIndex === 3 ? 'active' : ''"
              @click="tabIndex = 3"
            >
              民主管理
            </div>
          </div>
        </a-col>
        <a-col :span="12"
          ><div class="title">新可软件工会网上服务平台领导驾驶舱</div></a-col
        >
        <a-col :span="6">
          <div class="actionGroup">
            <div
              class="action"
              :class="tabIndex === 4 ? 'active' : ''"
              @click="tabIndex = 4"
            >
              职工服务
            </div>
            <div
              class="action"
              :class="tabIndex === 5 ? 'active' : ''"
              @click="tabIndex = 5  "
            >
              文化建设
            </div>
            <div class="action" @click="toggle">
              {{ isFullscreen ? "退出" : "全屏" }}
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- <canvas ref="canvas" class="canvas"></canvas> -->
    <MyMain v-if="tabIndex === 1"></MyMain>
    <Office v-if="tabIndex === 2"></Office>
    <Democracy v-if="tabIndex === 3"></Democracy>
    <Service v-if="tabIndex === 4"></Service>
    <Cultural v-if="tabIndex === 5"></Cultural>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useFullscreen } from "@vueuse/core";
import MyMain from "./main.vue";
import Office from "./office.vue";
import Democracy from "./democracy.vue";
import Service from "./service.vue";
import Cultural from "./cultural.vue";

const tabIndex = ref(1);
const canvas = ref();
const main = ref();
const ctx = ref<CanvasRenderingContext2D>();
const Arr = ref<number[]>([]);
const { toggle, isFullscreen } = useFullscreen(main);

const transitionEnd = () => {
  isOver.value = true;
};
const isOver = ref(false);
onMounted(() => {
  // ctx.value = canvas.value.getContext("2d");
  // canvas.value.width = main.value.clientWidth;
  // canvas.value.height = main.value.clientHeight;
  // Arr.value = Array(Math.ceil(canvas.value.width / 10)).fill(0);
  // console.log(ctx.value);
});
const draw = () => {
  ctx.value!.fillStyle = "rgba(0,0,0,0.0001)";
  ctx.value!.fillRect(0, 0, canvas.value.width, canvas.value.height);
  ctx.value!.fillStyle = "rgba(143,210,239,0.2)";
  Arr.value.forEach((item, index) => {
    ctx.value!.fillText(
      ["0", "1"][Math.floor(Math.random() * 2)],
      index * 10,
      item + 10
    );
    Arr.value[index] =
      item > canvas.value.height || item > 5000 * Math.random() ? 0 : item + 10;
  });
};
// setInterval(draw, 100);
console.log(draw);
</script>

<style scoped lang="less">
.main {
  position: relative;
  width: 100%;
  background: url("../../assets/echart/bg.jpg") no-repeat;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  background-color: rgb(0, 7, 66);
}
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.bgImg {
  width: 518px;
  height: 518px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s;
  z-index: 2;
}
.center {
  background: url("../../assets/echart/map.png") no-repeat;
  opacity: 0.3;
  animation: circle 15s linear infinite reverse;
}
.circle {
  width: 643px;
  height: 643px;
  background: url("../../assets/echart/lbx.png") no-repeat;
  opacity: 0.9;
  background-size: cover;
  animation: circle 10s linear infinite;
}
.line {
  width: 566px;
  height: 566px;
  background: url("../../assets/echart/jt.png") no-repeat;
  opacity: 0.9;
  background-size: cover;
  animation: circle 8s linear infinite reverse;
}

.big {
  animation: big 2s ease-in-out;
}
.header {
  width: 100%;
  height: 105px;
  background: url("../../assets/echart/head_bg.png") no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
  line-height: 70px;
  font-weight: bold;
  color: white;
  font-size: 38px;
  z-index: 2;
}

.actionGroup {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 30px;
  .action {
    margin: 0 calc((100% - 118px * 3) / 3 / 2);
    width: 118px;
    height: 48px;
    background: url("../../assets/echart/action.png") no-repeat;
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: #9da4b6;
    cursor: pointer;
    transition: all 0.6s;
    &:hover {
      background: url("../../assets/echart/actionActive.png") no-repeat;
      color: #fff;
    }
  }
  .active {
    background: url("../../assets/echart/actionActive.png") no-repeat;
    color: #fff;
  }
}
.select-tab {
  margin-top: auto;
  display: flex;
  width: 100%;
  height: 64px;
  &-item {
    width: 70px;
    height: 100%;
    background: url("../../assets/echart/mainm-11.png") no-repeat;
    background-color: red;
  }
}
@keyframes circle {
  0% {
    transform: translate(-50%, -35%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -35%) rotate(360deg);
  }
}
@keyframes big {
  0% {
    transform: translate(-50%, -35%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -35%) scale(1);
    opacity: 1;
  }
}
</style>
